<script setup lang="ts">
withDefaults(
    defineProps<{
        type?: 'success' | 'primary' | 'error' | 'warning' | 'info' | 'light';
    }>(),
    {
        type: 'primary'
    }
);
</script>

<template>
    <span class="status" :class="type">
        <slot />
    </span>
</template>

<style scoped lang="scss">
@include b(status) {
    display: inline-block;
}

.status + .status {
    margin-left: 16px;
}

.success {
    color: var(--q-color-success);
}

.primary {
    color: var(--q-color-primary-light-3);
}

.error {
    color: var(--q-color-danger);
}

.warning {
    color: var(--q-color-warning);
}

.info {
    color: var(--q-text-color-primary);
}

.light {
    color: var(--q-text-color-secondary);
}
</style>
